<template>
  <div class="organizationStructure">
    <el-tree :data="organData" default-expand-all :expand-on-click-node="false" @node-click="organHead.clickFun">
      <div class="custom-tree-node" slot-scope="{node,data}">
        <div v-if="organHead.type!=='edit'">
          <div class="fl">{{ node.label }}</div>
        </div>
        <template v-if="organHead.type=='edit'">
          <div v-if="data.newNode">
            <input type="text" class="fl" v-model="tm_str">
            <div class="switchs_1 fr">
              <el-button type="text" class="save fl" size="mini" @click="saveFun(organHead.save,data)">

              </el-button>
              <el-button type="text" class="eliminate fl" size="mini" @click="eliminateFun(data,node)">

              </el-button>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </div>
          <div v-else>
            <div class="fl">{{ node.label }}</div>
            <div class="switchs_0 fr">
              <el-button type="text" class="edit fl" size="mini" @click="editFun(organHead.editFun,data)">
              </el-button>
              <el-button type="text" class="delete fl" size="mini" @click="organHead.remove(data)">
              </el-button>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </div>
        </template>
      </div>
    </el-tree>
  </div>


</template>
<style lang="scss" scoped>
  .save,
  .eliminate,
  .delete,
  .edit {
    width: 30px;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
  }


  .custom-tree-node,
  .custom-tree-node div {
    height: 100%;
    line-height: 40px;
  }

  .custom-tree-node>div {
    padding-right: 70px;
    position: relative;
  }

  .custom-tree-node>div>input.fl {
    display: block;
    height: 26px;
    margin-top: 5px;
    width: 100px;
  }

  .custom-tree-node>div>.fr {
    width: 62px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: right
  }

</style>

<style lang="scss">
  .organizationStructure {
    .organizationStructure .el-menu-vertical-demo {
      padding-top: 21px;
      border: none;
    }

    .el-tree-node__expand-icon.expanded {
      transform: none;
    }

    .el-icon-caret-right:before {
      content: url("../../assets/img/tree_node_show.png");
    }

    .expanded.el-icon-caret-right:before {
      content: url("../../assets/img/tree_node_close.png");
    }

    .is-leaf.el-icon-caret-right:before {
      content: none;
    }

    .el-tree-node__content {
      height: 40px;
    }

    .el-tree-node>.el-tree-node__children {
      overflow: initial;
    }

    .el-tree-node__content:hover {
      background: none;
      box-shadow: #eff5fe 1px 1px 5px;
    }

    .el-tree-node__content .el-tree-node__expand-icon {
      padding-left: 14px;
    }
  }

</style>

<script>
  import axios from 'axios'
  export default {
    name: 'leftNav',
    data() {
      return {
        // data: JSON.parse(JSON.stringify(organData))
        switchs: null,
        tm_str: "新建部门"
      }
    },
    created() {},
    methods: {
      editFun(fun, data) {
        // this.switchs = data.$treeNodeId;
        // this.tm_str = data.label;
        fun(data);
      },
      saveFun(fun, data, node) { //更改提交
        this.$set(data, 'label', this.tm_str);
        if (fun(data) === true) {
          this.$set(data, 'newNode', null);
        };
      },
      eliminateFun(data, node) {
        let parent = node.parent;
        let children = parent.data.children || parent.data;
        let index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
        this.tm_str = "新建部门";
      }
    },
    props: ['organData', 'organHead']
  }

</script>
